<template>
  <app-card>
    <template #header>
      <el-input
          v-model="listParams.name"
          placeholder="请输入账号名称或者昵称"
          clearable
          @clear="loadList"
          style="width: 400px"
      >
        <template #append>
          <el-button @click="loadList">
            <el-icon>
              <search/>
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </template>
    <el-table
        :data="list"
        v-loading="listLoading"
        stripe
        :style="'width: 100%;height: '+height+'px'"
    >
      <el-table-column type="index" width="60px" label="序号" align="center"/>
      <el-table-column align="center" width="160px" prop="userName" label="用户名称"/>
      <el-table-column align="center" prop="avatar" width="80px" label="头像">
        <template #default="{row}">
          <app-avatar :size="45" :src="row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="160px" prop="nickName" label="昵称"/>
      <el-table-column align="center" width="90px" prop="conn" label="连接数">
        <template #default="{row}">
          <el-tag :type="connType(row.conn)" effect="dark">{{ row.conn }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px" prop="conn" label="客户端">
        <template #default="{row}">
          <el-tag type="info">{{ row.clientIp }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="260px" prop="conn" label="在线时间">
        <template #default="{row}">
          <el-tag type="info">{{ friendlyDate(row.time) }}</el-tag>
          <el-tag style="margin-left: 10px;">{{ formatDate(row.time) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" width="160px" label="操作">
        <template #default="{row}">
          <el-button style="color: green" type="text" @click="showUsers(row.userName)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
        v-model:page="listParams.pageNum"
        v-model:limit="listParams.pageSize"
        :list-count="listCount"
        :load-list="loadList"
        :disabled="listLoading"
    />
    <clients :username="username" v-model="formVisible"></clients>
  </app-card>
</template>


<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {friendlyDate, formatDate} from "@/utils/constants";
import {ClientListParams, IClientInfo} from "@/api/types/chat";
import {getClientList} from "@/api/chat";

defineProps({
  height: {
    type: Number,
    default: 500,
  },
});

const list = ref<IClientInfo[]>([]);
const listCount = ref(0);
const listLoading = ref(false);
const listParams = reactive<ClientListParams>({
  pageNum: 1,
  pageSize: 10,
  name: ''
});

onMounted(() => {
  loadList();
});

const loadList = async () => {
  listLoading.value = true;
  const data = await getClientList(listParams).finally(() => {
    listLoading.value = false;
  });
  list.value = data.rows;
  listCount.value = data.total;
};

const formVisible = ref(false);
const username = ref("");
const showUsers = (name: string) => {
  formVisible.value = true
  username.value = name
}

const connType = (conn: number) => {
  if (conn === 1) {
    return ''
  }
  if (conn < 3) {
    return 'success'
  }
  return 'danger'
}

</script>

<style lang="scss" scoped>

</style>
